//用户管理 - 注册用户

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Form , Input, DatePicker, Select, Row, Col, Table, Tag, Drawer } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import LoanInfo from '../../../components/LoanInfo';
import BankInfo from '../../../components/BankInfo';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
    key: i,
    name: '未认证',
    phone: 18040938541,
    IDnumber: '未认证',
    registeredDate: '2018-12-13 20:22:29',
    registeredMethod:'baisha',
    freeze:'-',
    forbidden:'-',
    cz:['资料']
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Register extends Component {
  state = {
    selectedRowKeys: [],
    visible: false,
    bankDrawer: false
  };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  showBankDrawer = () => {
    this.setState({
      bankDrawer: true,
    });
  }

  onClose = () => {
    this.setState({
      visible: false,
      bankDrawer: false,
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }
	
	handleSearch = () => {
		console.log(1);
	}

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">注册用户列表</span>
              <div className="btn">
                <Button icon="redo" size="small">刷新</Button>
                <Button icon="delete" size="small" onClick={this.handleDelete}>清空</Button>
                <Button icon="search" size="small" type="primary" htmlType="submit" onClick={this.handleSearch}>搜索</Button>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('phone', {
                      rules: [{ required: true, message: 'Please input your phone!' }],
                    })(
                      <Input placeholder="手机号" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: 'Please input your name!' }],
                    })(
                      <Input placeholder="姓名" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )} 
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('IDnumber', {
                      rules: [{ required: true, message: 'Please input your IDnumber!' }],
                    })(
                      <Input placeholder="身份证号" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )} 
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('range-picker', rangeConfig)(
                        <RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('registeredMethod', {
                      rules: [{ required: true, message: 'Please input your registeredMethod!' }],
                    })(
                      <Select placeholder="注册渠道" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }}>
                        <Select.Option value="repaying">渠道01</Select.Option>
                        <Select.Option value="working">渠道02</Select.Option>
                      </Select>
                    )}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='姓名' align='center' dataIndex='name' width='50' className='register-name' />
              <Column title='手机号' align='center' dataIndex='phone' width='80' />
              <Column title='身份证号' align='center' dataIndex='IDnumber' width='50' className='id-number' />
              <Column title='注册时间' align='center' dataIndex='registeredDate' width='90' />
              <Column title='注册渠道' align='center' dataIndex='registeredMethod' width='120' />
              <Column title='冻结' align='center' dataIndex='freeze' width='60' />
              <Column title='禁用' align='center' dataIndex='forbidden' width='60' />
              <Column title='操作' align='center' dataIndex='cz' width='400px' 
                render={cz => (
                  <span>
                    {cz.map(cz => <Tag color="green" key={cz}>{cz}</Tag>)}
                    <Tag color="blue" key='jk' onClick={this.showDrawer}>借款信息</Tag>
                    <Tag color="blue" key='yh'onClick={this.showBankDrawer}>银行卡</Tag>
                    <Tag color="orange" key='dj'>冻结</Tag>
                    <Tag color="red" key='jy'>禁用</Tag>
                  </span>
                )} />
            </Table>
          </div>
          <Drawer
          title="借款信息"
          placement="right"
          width="70%"
          onClose={this.onClose}
          visible={this.state.visible}
          >
            <LoanInfo />
          </Drawer>
          <Drawer
          title="银行卡信息"
          placement="right"
          width="70%"
          onClose={this.onClose}
          visible={this.state.bankDrawer}
          >
            <BankInfo />
          </Drawer>
        </div>
      </LocaleProvider>  
		);
	}
}

const registerForm = Form.create()(Register);

export default registerForm;